<template>
  <div>
    <van-row class="row">
      <van-col span="6">
        <div class="four-box">
          <van-icon name="orders-o" size="40" color="#1989fa" />
          <div class="linktitle">积分余额</div>
        </div>
      </van-col>
      <van-col span="6">
        <div class="four-box">
          <van-icon name="shopping-cart-o" size="40" color="#1989fa" />
          <div class="linktitle">积分明细</div>
        </div>
      </van-col>
      <van-col span="6">
        <div class="four-box">
          <van-icon name="chat-o" size="40" color="#1989fa" />
          <div class="linktitle">积分规则</div>
        </div>
      </van-col>
      <van-col span="6">
        <div class="four-box">
          <van-icon name="after-sale" size="40" color="#1989fa" />
          <div class="linktitle">兑换记录</div>
        </div>
      </van-col>
    </van-row>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      class="pullrefresh"
    >
      <div>
        <van-card
          desc="121份已领"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        >
          <template #price>
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
              "
            >
              <div style="color: red; font-size: 0.4rem">999积分</div>
            </div>
          </template>
          <template #tags>
            <van-tag plain type="primary">限量200份</van-tag>
          </template>
          <template #num>
            <van-button
              round
              style="
                color: white;
                background-color: #5e94fd;
                height: 0.7rem;
                font-size: 0.3rem;
              "
              >立即兑换</van-button
            >
          </template>
        </van-card>

        <van-card
          desc="121份已领"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        >
          <template #price>
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
              "
            >
              <div style="color: red; font-size: 0.4rem">999积分</div>
            </div>
          </template>
          <template #tags>
            <van-tag plain type="primary">限量200份</van-tag>
          </template>
          <template #num>
            <van-button
              round
              style="
                color: white;
                background-color: #5e94fd;
                height: 0.7rem;
                font-size: 0.3rem;
              "
              >立即兑换</van-button
            >
          </template>
        </van-card>

        <van-card
          desc="121份已领"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        >
          <template #price>
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
              "
            >
              <div style="color: red; font-size: 0.4rem">999积分</div>
            </div>
          </template>
          <template #tags>
            <van-tag plain type="primary">限量200份</van-tag>
          </template>
          <template #num>
            <van-button
              round
              style="
                color: white;
                background-color: #5e94fd;
                height: 0.7rem;
                font-size: 0.3rem;
              "
              >立即兑换</van-button
            >
          </template>
        </van-card>
      </div>
    </van-pull-refresh>
    <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom))" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      mgoodlist: [
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第一件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第二件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第三件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第四件商品第四件商品第四件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第五件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第六件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第六件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第六件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
        {
          mgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          mgoodname: "第六件商品",
          mgoodprice: "52",
          mgoodotherimg: [],
          mgooddescription: "",
        },
      ],
      isLoading: false,
      active: "all",
    };
  },
  methods: {
    filtergoods() {},
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    changefilter() {
      // if(value == "all"){
      // }else if(value == "new"){
      // }else if(value == "sale"){
      // }else if(value == "price"){
      // }
    },
  },
};
</script>

<style scoped>
.pullrefresh {
  height: 100%;
  width: 100%;
  background-color: #f7f8fa;
  margin: 0;
  padding: 0;
}

.row {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.linktitle {
  font-size: 16px;
  font-weight: 550;
}

.four-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60px;
  font-size: 15px;
}

.filterbox :deep(.van-tabbar-item__text) {
  font-size: 14px;
}

.gridbox {
  justify-content: center;
  padding: 0 !important;
}

.gridbox > :last-child {
  margin-right: auto;
}

.mgoodbox {
  width: 100%;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mgoodimgbox .mgoodimg {
  width: 30%;
}

.mgoodinfo {
  display: flex;
  flex-direction: column;
}

.mgoodinfo .mgoodname {
  font-size: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
}

.mgoodinfo .mgoodprice {
  font-size: 18px;
  font-weight: 550;
  color: #ff4d4f;
}

.van-image__img {
  border: #5e94fd 1px solid;
  border-radius: 0.5rem;
}

.van-card {
  border-radius: 0.5rem;
  border: #5e94fd 1px solid;
  margin: 0.2rem 0.5rem;
}
</style>